<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery-React</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/simple_style.css" />
</head>

<body style="background-image: url(./ui.jpeg);">
    <img src="img/bg.jpg" alt="err" id="site-bg">
    <div id="app">
        <div class="header">
            <div class="header-left">
                <a class="site-logo" href="https://www.gamersky.com/">GAMERSKY.COM</a>
            </div>
            <div class="header-right"></div>
        </div>
        <div id="tab-container">
            <div class="tab-menu-btn">热门游戏</div>
            <div class="tab-menu-btn">战争</div>
            <div class="tab-menu-btn">恐怖</div>
            <div class="tab-menu-btn">僵尸</div>
            <div class="tab-menu-btn">沙盒</div>
            <div class="tab-menu-btn">休闲</div>
            <div class="tab-menu-btn">硬件杀手</div>
            <div class="tab-menu-btn">独立游戏</div>
            <div class="tab-menu-btn">国产游戏</div>
        </div>
        <div id="slider" class="simple-swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-items">
                    <img src="https://www-stream.2345cdn.net/upload/20250605/LUEdW25T-20250605103522.jpg" alt="">
                </div>
                <div class="swiper-items"><img
                        src="https://www-stream.2345cdn.net/upload/20250212/TTQSbMkd-20250212102640.jpg" alt=""></div>
                <div class="swiper-items">
                    <img src="https://www-stream.2345cdn.net/upload/20250121/9bcP9XtL-20250121133031.png" alt="">
                </div>
            </div>
            <a href="javascript:void(0)" id="1" class="btn btn-prev swiper-btn"></a>
            <a href="javascript:void(0)" class="btn btn-next swiper-btn"></a>
            <div class="pagehelper pagination" id="pagination"></div>
        </div>
    </div>
    <button id="dev-view" type="button"> 切换视图 </button>
    <button id="dev-view1" type="button"> 突出显示 </button>
    <script type="text/javascript" src="js/simple_swiper_min.js"></script>
    <script type="text/javascript" src="js/jQuery.js"></script>
</body>
<script>
    $(document).ready(function () {
        var data = {
            header: {
                tabs: [{// 顶部按钮组
                    text: "手机客户端",
                    icon: [0, -110]
                }, {
                    text: "网站导航",
                }, {
                    text: "最新单机游戏"
                }, {
                    text: "通知"
                }, {
                    text: "登录",
                    icon: [0, -70]
                }, {
                    text: "注册"
                }]
            }
        }
        $("#dev-view").click(function () {
            $("#app").toggleClass("hidden");
        });
        $("#dev-view1").click(function () {
            $("#app").toggleClass("white-bg");
        });
        function render() {
            return {
                header_tab() {
                    var vm = $();
                    $.every(data.header.tabs, function (item) {
                        var str = item.text;
                        var node = null;
                        if (item.icon) {
                            node = $("<span class='btn-tab' show-icon style='background-position:" + item.icon[0] + "px " + item.icon[1] + "px'>" + str + "</span>");
                        } else {
                            node = $("<span class='btn-tab'> " + str + " </span>")
                        }
                        if (node) {
                            vm.add(node);
                        }
                    });
                    $(".header-right").add(vm);
                    $(".tab-menu-btn").hover(function(t){
                        console.log(this);
                    },function(){

                    })
                }
            }
        }

        var r = render();
        r.header_tab();// 渲染顶部按钮
        new SimSwiper("#slider", {
            lazy: false,
            autoplay: true,
            loop: true,
            // duration: 1000,
            button: {
                next: ".btn-next",
                prev: ".btn-prev"
            },
            pagination: {
                el: "#pagination",
                click: true
            }
        })
    });
</script>

</html>